import React, {useEffect, useMemo, useState} from "react";
import {listTopInvokeInterfaceUsingGet} from "@/services/api-backend/analysisController";
import {Button, Card, Form, InputNumber, message, Space} from "antd";
import ReactECharts from "echarts-for-react";

type Props={
  type?:number
}
export const TopInvoke: React.FC<Props> =(props)=>{
  const {type}=props
  const [data, setData] = useState<API.InterfaceInfoVO[]>([])
  const [loading, setLoading] = useState<boolean>(false)
  const [top,setTop]=useState<number>(7)
  const [formRef]=Form.useForm()

  const loadData=async (size:number=7)=>{
    try {
      setLoading(true)
      const {data:response}=await listTopInvokeInterfaceUsingGet({size,type})
      if(response){
        setTimeout(()=> {
          setData(response)
          setTop(size)
        },2300)
      }
    } catch (error) {
      message.error('统计调用次数最多的接口失败');
    }finally {
      setTimeout(()=> setLoading(false),3000)
    }
  }
  const doSubmit=async (values:any)=>{
    if(!values.top&&values.top<=0){
      message.warning("请输入大于0的top");
      return;
    }
    await loadData( values.top || 7);
  }
  const doReset = async () => {
    formRef.resetFields();
    await loadData( 7);
  };

  const chartData=data.map(item=>{
    return {
      value:item.totalNum,
      name:item.name
    }
  })
  const option = useMemo(()=>{
    return{
      title: {
        text: `Top${top} 调用次数最多的接口`,
        left: 'center',

        textStyle: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#333'
        },
        subtextStyle: {
          fontSize: 14,
          color: '#999'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        backgroundColor: 'rgba(50, 50, 50, 0.9)',
        borderColor: '#333',
        borderWidth: 0,
        textStyle: {
          color: '#fff',
          fontSize: 14
        },
        padding: [10, 15],
        extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 4px;'
      },
      legend: {
        orient: '',
        left: 'left',
        top: 'top',
        textStyle: {
          fontSize: 13,
          color: '#666'
        },
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 16
      },
      color: [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc'
      ],
      series: [
        {
          name: '调用次数',
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter: '{b}\n{d}%',
            fontSize: 12,
            color: '#666',
            fontWeight: 'bold'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold',
              color: '#333'
            },
            itemStyle: {
              shadowBlur: 20,
              shadowOffsetX: 0,
              shadowOffsetY: 4,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            scale: true,
            scaleSize: 10
          },
          labelLine: {
            show: true,
            length: 15,
            length2: 10,
            smooth: true,
            lineStyle: {
              width: 2
            }
          },
          data:chartData,
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx: number) {
            return idx * 100;
          }
        }
      ]
    };
  },[top, chartData])


  useEffect(() => {

    if(type!==undefined){
      loadData()
    }
  },[type])
  return <>
    <Card  style={{marginBottom:24}}>
      <Form
        form={formRef}
        layout="inline"
        onFinish={doSubmit}
        initialValues={{ top: 7 }}
      >
        <Form.Item label="Top" name="top">
          <InputNumber
            placeholder="请输入top"
            style={{ width: 150 }}
            min={1}
            max={90}
          />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" loading={loading}>
              查询
            </Button>
            <Button onClick={doReset} disabled={loading}>重置</Button>
          </Space>
        </Form.Item>

      </Form>
    </Card>
    <ReactECharts
      opts={{ renderer: "canvas" }}
      notMerge={true}
      showLoading={loading}
      option={option}/>

  </>
}
